<script setup>
import { CircleCloseFilled } from '@element-plus/icons-vue'
import { useTodoListStore } from '@/stores/todolist'
import 'animate.css'

const todolistStore = useTodoListStore()
// console.log(todolistStore.todos)
</script>
<template>
    <div class="todo-container">
      <div class="todo-header">
        <el-input
          placeholder="请输入待办事项..."
          v-model="todolistStore.inputValue"
          @keyup.enter="todolistStore.addTodo"
        >
          <template #suffix>
            <el-icon
              class="clear-icon"
              v-if="todolistStore.inputValue"
              @click="todolistStore.clearInput"
            >
              <CircleCloseFilled />
            </el-icon>
          </template>
        </el-input>
        <el-button type="primary" class="add-button" @click="todolistStore.addTodo"
          >
          <span>添加</span>
          </el-button
        >
      </div>
      <div class="todo-list">
        <transition-group
          name="animate__animated animate__bounce "
          enter-active-class="animate__backInRight"
          leave-active-class="animate__backOutRight"
        >
          <div class="todo-item" v-for="todoObj in todolistStore.todos" :key="todoObj.id">
            <el-checkbox v-model="todoObj.isDone">
              <span :class="{ 'todo-completed': todoObj.isDone }">{{ todoObj.todo }}</span>
            </el-checkbox>
            <el-button
              type="danger"
              class="delete-button"
              @click="todolistStore.deleteTodo(todoObj.id)"
            >
              <span>删除</span>
            </el-button>
          </div>
        </transition-group>
      </div>
      <div class="todo-footer">
        <span class="todo-count"
          >已完成: {{ todolistStore.completedCount }} / 全部: {{ todolistStore.totalCount }}</span
        >
        <div>
          <el-button
            type="primary"
            v-if="!todolistStore.isAllCompleted"
            @click="todolistStore.toggleAll"
          >
            <span>全选</span>
          </el-button>
          <el-button type="danger" v-else @click="todolistStore.toggleAll">
            <span>取消全选</span>
          </el-button>
          <el-button type="danger" @click="todolistStore.clearCompleted">
            <span>清除已完成</span>
          </el-button>
        </div>
      </div>
    </div>
</template>
<style scoped lang="scss">
  .todo-container {
    width: 400px;
    height: 550px;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 0.784);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .todo-header {
      display: flex;
      width: 100%;
      justify-content: center;
      align-items: center;
      .el-input {
        height: 40px;
        font-size: 15px;
        .clear-icon {
          cursor: pointer;
          color: #c0c4cc;
          font-size: 25px;
          margin-right: 0px;
        }
        .clear-icon:hover {
          color: #909399;
        }
      }
      .add-button {
        height: 40px;
        margin-left: 5px;
        font-size: 15px;
      }
    }
    .todo-list {
      height: 400px;
      border-radius: 5px;
      background-color: rgba(255, 255, 255, 0.784);
      border: 1px solid #ccc;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      padding: 20px;
      overflow: auto;
      scrollbar-width: none;
      .todo-item {
        background-color: rgba(255, 255, 255, 0.784);
        border: 1px solid #ccc;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        margin-bottom: 10px;
        padding: 10px;
        display: flex;
        justify-content: space-between;
        &:hover {
          background-color: rgb(236, 239, 239);
        }
        .todo-completed {
          text-decoration: line-through;
          color: #999;
        }
      }
    }
    .todo-footer {
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-radius: 5px;
      padding: 5px 20px;
      background-color: rgba(255, 255, 255, 0.784);
      border: 1px solid #ccc;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
  }
</style>
